<template>
  <page-detail>
    <div class="form-container">
      <!-- 表单内容 -->
      <van-form ref="form">
        <!-- 矛盾标题 -->
        <van-field
            v-model="formData.disputeTitle"
            label="矛盾标题"
            placeholder="请输入"
            :rules="[{ required: true, message: '请输入矛盾标题' }]"
        />

        <van-field
            v-model="formData.itemName"
            label="矛盾类型"
            placeholder="请选择"
            readonly
            clickable
            right-icon="arrow-down"
            @click="showTypePicker = true"
            :rules="[{ required: true, message: '请选择矛盾类型' }]"
        />
        <van-field
            v-model="formData.disputeContent"
            label="矛盾内容"
            type="textarea"
            placeholder="请输入"
            autosize
        />
        <div class="upload-section">
          <div class="upload-title">附件图片</div>
          <ne-file-upload :max-file="3" v-model="formData.itemCoverUrls"/>
        </div>
      </van-form>

      <!-- 类型选择器 -->
      <van-popup v-model="showTypePicker" position="bottom">
        <van-picker
            show-toolbar
            :columns="typeList"
            @confirm="onTypeConfirm"
            @cancel="showTypePicker = false"
        />
      </van-popup>
    </div>
    <template #footer>
      <van-button round type="primary" style="width: 200px" @click="submit">
        立即发起
      </van-button>
    </template>
  </page-detail>
</template>

<script>
import {Dialog, Toast} from 'vant';
import {getDict} from "../../api/tbDict";
import NeFileUpload from "../../components/NeFileUpload.vue";
import {mapGetters} from "vuex";
import {tbSuggestionSave} from "../../api/tbSuggestion";
import {tbContradictionDisputeSave} from "../../api/tbContradictionDispute";
export default {
  name: 'wx_pages_fzbz_disputeSubmit',
  components:{NeFileUpload},
  data() {
    return {
      showTypePicker: false,
      formData: {
        "disputeTitle": "",
        "disputeType": "",
        "disputeContent": "",
        "disputePicUrl1": "",
        "disputePicUrl2": "",
        "disputePicUrl3": "",
        "disputeFileUrl": "",
        "note": "",
        "itemName":"",
        "itemCoverUrls":[]
      },
      typeList: [],
      // 上传的文件列表
      fileList: [],
      showTime:false
    }
  },
  computed:{
    ...mapGetters(['userInfo']),
  },
  methods: {
    // 类型选择确认
    onTypeConfirm(value) {
      this.formData.disputeType = value.value;
      this.formData.itemName= value.text;
      this.showTypePicker = false;
    },
    // 提交表单
    submit() {
      const _this = this
      const formData = {
        ...this.formData,
        userId:this.userInfo.userId,
        userName:this.userInfo.userName
      };
      const [disputePicUrl1,disputePicUrl2,disputePicUrl3] = formData.itemCoverUrls && formData.itemCoverUrls.map(i=>i.url) || [];
      if(disputePicUrl1){
        formData.disputePicUrl1 = disputePicUrl1;
      }
      if(disputePicUrl2){
        formData.disputePicUrl2 = disputePicUrl2;
      }
      if(disputePicUrl3){
        formData.disputePicUrl3 = disputePicUrl3;
      }
      formData.suggestionStatus = '0'
      if(formData.itemCoverUrls){
        delete formData.itemCoverUrls
      }
      _this.$refs.form.validate().then(()=>{
        Dialog.confirm({
          title: '提示',
          message: '是否确认提交?',
        }).then(async () => {
          _this.$showLoading("提交中...")
          await tbContradictionDisputeSave(formData)
          Toast.success({
            message: '提交成功',
            duration: 1500,
            onClose: () => {
              _this.$navigateBack()
            }
          });
          _this.$hideLoading()
        }) .catch(() => {});
      })
    }
  },
  onLoad() {
    getDict("dispute_type").then(res=>{
      this.typeList = res.data.map(item => ({
        text: item.dictValue,
        value: item.dictKey
      }));
    })
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  padding: 20px 16px;
  min-height: 100vh;
  background-color: #f7f8fa;

  .upload-section {
    margin: 20px 0;
    padding: 16px;
    background-color: #fff;
    border-radius: 8px;

    .upload-title {
      font-size: 14px;
      color: #333;
      margin-bottom: 16px;
    }

    .upload-btn {
      width: 80px;
      height: 80px;
      background-color: #f7f8fa;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .upload-text {
        font-size: 12px;
        color: #969799;
        margin-top: 8px;
      }
    }
  }
}
</style>
